<!--
 * @Descripttion: 工具栏按钮渲染
 * @LastEditors: xzh
 * @LastEditTime: 2023-08-05 23:43:30
-->
<template>
  <!-- 按钮 -->
  <el-button
    v-if="
      !![btnTypeEnum.button, btnTypeEnum.refresh].includes(toolBtnItem.btnType)
    "
    :type="toolBtnItem.type || 'success'"
    :plain="toolBtnItem.plain != false"
    :disabled="!!toolBtnItem.disabled"
    size="default"
    @click="emit('toolBtnClick', { code: toolBtnItem.code, item: toolBtnItem })"
  >
    <!-- 按钮图标 -->
    <ToolsIcon
      v-if="toolBtnItem.icon"
      :icon="toolBtnItem.icon"
      :name="toolBtnItem.iconName"
    />
    {{ $t(`${toolBtnItem.label}`) }}
  </el-button>

  <!-- 下拉菜单 -->
  <el-dropdown
    class="el-button is-link"
    v-else-if="toolBtnItem.btnType == btnTypeEnum.dropdown"
    trigger="click"
    :disabled="!!toolBtnItem.disabled"
    @command="
      emit('toolBtnClick', {
        code: toolBtnItem.code,
        command: $event,
        item: toolBtnItem,
      })
    "
  >
    <span>
      <!-- 按钮图标 -->
      <ToolsIcon
        v-if="toolBtnItem.icon"
        :icon="toolBtnItem.icon"
        :name="toolBtnItem.iconName"
      />
      {{ $t(`${toolBtnItem.label}`) }}
      <el-icon><ArrowDown /></el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="(dropdown, index) in toolBtnItem.dropdownArr"
          :key="index"
          :command="dropdown.code"
          :disabled="!!dropdown.disabled"
        >
          {{ $t(`${dropdown.label}`) }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

  <!-- 关键字筛选 -->
  <KeyWordFilter
    v-else-if="toolBtnItem.btnType == btnTypeEnum.keyWordFilter"
    :toolBtnItem="toolBtnItem"
  />
</template>

<script setup lang="ts">
import { ref, reactive, inject } from "vue";
import { btnTypeEnum, propsParam_Inf } from "../../index.type";
import { ArrowDown } from "@element-plus/icons-vue";
import { ToolsIcon, KeyWordFilter } from "./index";
import { object_Inf } from "@/utils/typings/index.type";

/**
 * @Author: xzh
 * @Descripttion:表格传入参数
 * @Param:
 */
let propsParam = reactive<propsParam_Inf | object_Inf>(
  inject("propsParam") || {}
);

const emit = defineEmits(["toolBtnClick"]);

defineProps({
  //按钮数据源
  toolBtnItem: {
    type: Object,
    requited: {},
    default: true,
  },
});
</script>
<style lang="scss" scoped>
.el-dropdown {
  & > span {
    display: flex;
  }
}
</style>
